<template>
  <div class="userContainer">
    <div class="userState">
      <div class="username">
        <div class="userBg">
          <img src="@/assets/user.png" alt="">
        </div>
        <div class="userbox">
            <h4 style="padding: 0;margin: 0;">超级暴龙战神</h4>
            <span>申请认证</span>
          </div>
      </div>
      <div class="userinfo">
        <a href="javascript:;">
          1000+
          <span>动态</span>
        </a>
        <a href="javascript:;">20w<span>关注</span></a>
        <a href="javascript:;">18.5w<span>粉丝</span></a>
      </div>
    </div>
    <van-cell is-link><van-icon name="edit" style="margin-right: 5px;"/>编辑资料</van-cell>
    <van-cell is-link><van-icon name="chat-o" style="margin-right: 5px;"/>小爱同学</van-cell>
    <van-cell is-link><van-icon name="info-o" style="margin-right: 5px;"/>退出登入</van-cell>
  </div>
</template>

<script>
import { getActicleListAPI } from '@/api/acticleAPI.js'
export default {
  name: 'myUser',
  data () {
    return {
      page: 1,
      limit: 10
    }
  },
  methods: {
    async getUtils () {
      const { data: res } = await getActicleListAPI(this.page, this.limit)
      console.log(res)
    }
  },
  created () {
    this.getUtils()
  }
}
</script>

<style lang="less" scoped>
.userContainer {
  padding: 10px;
  .userState {
    position: relative;
    height: 200px;
    border-radius: 10px;
    background-color: #0077ff;
    .username {
      position: absolute;
      display: flex;
      left: 20px;
      top: 33px;
      height: 60px;
      width: 200px;
      // background-color: red;
      .userBg{
        width: 60px;
        height: 60px;
        border-radius: 50%;
        overflow: hidden;
        background-color: white;
        // margin-right: 10px;
        img{
          width: 100%;
          height: 100%;
        }
      }
      .userbox{
        color: white;
        font-size: 14px;
        padding-left: 10px;
        padding-top: 7px;
        span{
          margin-top: 5px;
          display: block;
          float: left;
          padding: 1px 1px;
          background-color: white;
          color:#0077ff;
          font-size: 12px;
        }
      }
    }
  }
  .userinfo{
    position: absolute;
    width: 100%;
    height: 40px;
    display: flex;
    // padding: 0 10px;
    justify-content: space-between;
    bottom: 25px;
    color: white;
    > a{
      flex: 1;
      display: flex;
      flex-wrap: wrap;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      color: white;
      font-size: 14px;
      // background-color: red;
      margin: 0 20px;
    }
  }
}
</style>
